<template>
  <div ref="rankBase" class="rank-base">
    <div class="two">
      <div class="no-two-value">
        <img v-if="staffRank[1]" :src="staffRank[1].avatar_url" height="100%" alt=""/>
        <span v-if="staffRank[1]">{{ staffRank[1].realname }}</span>
        <span v-if="staffRank[1]"> 共带来{{ staffRank[1].enroll_nunber }}人报名</span>
        <span v-else>虚位以待</span>
      </div>
      <div class="no-text no-two">
        第二名
      </div>
    </div>
    <div class="one">
      <div class="no-one-value">
        <img v-if="staffRank[0]" :src="staffRank[0].avatar_url" height="100%" alt=""/>
        <span v-if="staffRank[0]">{{ staffRank[0].realname }}</span>
        <span v-if="staffRank[0]"> 共带来{{ staffRank[0].enroll_nunber }}人报名</span>
        <span v-else>虚位以待</span>
      </div>
      <div class="no-text no-one">
        第一名
      </div>
    </div>
    <div class="third">
      <div class="no-third-value">
        <img v-if="staffRank[2]" :src="staffRank[2].avatar_url" height="100%" alt=""/>
        <span v-if="staffRank[2]">{{ staffRank[2].realname }}</span>
        <span v-if="staffRank[2]"> 共带来{{ staffRank[2].enroll_nunber }}人报名</span>
        <span v-else>虚位以待</span>
      </div>
      <div class="no-text no-third">
        第三名
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "CenterBelowBox",
  props: {
    staffRank: {
      type: Array,
      default: () => {
        return []
      }
    },
    centerBelowBoxHeight: {
      type: Number,
      default: 0,
    },
  },
  watch: {
    centerBelowBoxHeight: {
      handler(val) {
        this.$refs.rankBase.style.height = this.centerBelowBoxHeight + 'px';
      }
    }
  },
  mounted() {
    this.$refs.rankBase.style.height = this.centerBelowBoxHeight + 'px';
  }
}
</script>

<style scoped lang="scss">

.rank-base {
  padding: 20px 20px 30px 20px;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  flex: 1;
  .no-text {
    font-size: 20px;
    font-weight: bold;
    color: black;
    text-align: center;
  }
  .one {
    font-size: 14px;
    width: 33%;
    height: 100%;
    border-radius: 5px;
    position: relative;
    .no-one-value {
      text-align: center;
      height: auto;
      width: 100%;
      position: absolute;
      bottom: 70px;
      word-break: break-word;
    }
    .no-one {
      height: 70px;
      width: 100%;
      background-color: #07acf5;
      position: absolute;
      bottom: 0;
    }
  }
  .two {
    font-size: 14px;
    width: 33%;
    height: 100%;
    border-radius: 5px;
    position: relative;
    .no-two-value {
      text-align: center;
      height: auto;
      width: 100%;
      position: absolute;
      bottom: 50px;
      word-break: break-word;
    }
    .no-two {
      height: 50px;
      width: 100%;
      background-color: #07acf5;
      position: absolute;
      bottom: 0;
    }
  }
  .third {
    font-size: 14px;
    width: 33%;
    height: 100%;
    border-radius: 5px;
    position: relative;
    .no-third-value {
      text-align: center;
      height: auto;
      width: 100%;
      position: absolute;
      bottom: 30px;
      word-break: break-word;
    }
    .no-third {
      height: 30px;
      width: 100%;
      background-color: #07acf5;
      position: absolute;
      bottom: 0;
    }
  }
}
img {
  height: 30px;
  width: 30px;
  border-radius: 50%;
  vertical-align: middle;
}
</style>
